<template>
    <div class="p-6 space-y-6">
        <!-- 页面标题 -->
        <div class="flex items-center gap-4">
            <button @click="$router.back()"
                    class="flex items-center gap-2 px-3 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 transition-colors">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                返回
            </button>
            <h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200">修改密码</h2>
        </div>

        <div class="max-w-2xl">
            <!-- 密码修改表单 -->
            <div class="card">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-6">修改登录密码</h3>

                <form @submit.prevent="changePassword" class="space-y-6">
                    <!-- 当前密码 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            当前密码 <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <input v-model="form.currentPassword" :type="showCurrentPassword ? 'text' : 'password'"
                                   class="input pr-10" placeholder="请输入当前密码" required>
                            <button type="button" @click="showCurrentPassword = !showCurrentPassword"
                                    class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                                <svg v-if="showCurrentPassword" class="w-5 h-5" fill="none" stroke="currentColor"
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
                                </svg>
                                <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </button>
                        </div>
                    </div>

                    <!-- 新密码 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            新密码 <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <input v-model="form.newPassword" :type="showNewPassword ? 'text' : 'password'"
                                   class="input pr-10" placeholder="请输入新密码" @input="checkPasswordStrength" required>
                            <button type="button" @click="showNewPassword = !showNewPassword"
                                    class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                                <svg v-if="showNewPassword" class="w-5 h-5" fill="none" stroke="currentColor"
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
                                </svg>
                                <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </button>
                        </div>

                        <!-- 密码强度指示器 -->
                        <div v-if="form.newPassword" class="mt-2">
                            <div class="flex items-center gap-2 mb-2">
                                <span class="text-sm text-gray-600 dark:text-gray-400">密码强度：</span>
                                <div class="flex gap-1">
                                    <div v-for="i in 4" :key="i" :class="[
                                        'w-8 h-1 rounded-full transition-colors',
                                        i <= passwordStrength.score
                                            ? passwordStrength.score === 1 ? 'bg-red-500' :
                                                passwordStrength.score === 2 ? 'bg-orange-500' :
                                                    passwordStrength.score === 3 ? 'bg-yellow-500' : 'bg-green-500'
                                            : 'bg-gray-200 dark:bg-gray-700'
                                    ]"></div>
                                </div>
                                <span :class="[
                                    'text-sm font-medium',
                                    passwordStrength.score === 1 ? 'text-red-600 dark:text-red-400' :
                                        passwordStrength.score === 2 ? 'text-orange-600 dark:text-orange-400' :
                                            passwordStrength.score === 3 ? 'text-yellow-600 dark:text-yellow-400' :
                                                'text-green-600 dark:text-green-400'
                                ]">
                                    {{ passwordStrength.text }}
                                </span>
                            </div>

                            <!-- 密码要求 -->
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm">
                                <div v-for="requirement in passwordRequirements" :key="requirement.key" :class="[
                                    'flex items-center gap-2',
                                    requirement.met ? 'text-green-600 dark:text-green-400' : 'text-gray-500 dark:text-gray-400'
                                ]">
                                    <svg v-if="requirement.met" class="w-4 h-4" fill="none" stroke="currentColor"
                                         viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M5 13l4 4L19 7" />
                                    </svg>
                                    <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                              d="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                    {{ requirement.text }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 确认新密码 -->
                    <div>
                        <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                            确认新密码 <span class="text-red-500">*</span>
                        </label>
                        <div class="relative">
                            <input v-model="form.confirmPassword" :type="showConfirmPassword ? 'text' : 'password'"
                                   class="input pr-10" placeholder="请再次输入新密码" @input="checkPasswordMatch" required>
                            <button type="button" @click="showConfirmPassword = !showConfirmPassword"
                                    class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300">
                                <svg v-if="showConfirmPassword" class="w-5 h-5" fill="none" stroke="currentColor"
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
                                </svg>
                                <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </button>
                        </div>
                        <div v-if="form.confirmPassword && !passwordsMatch"
                             class="mt-1 text-sm text-red-600 dark:text-red-400">
                            两次输入的密码不一致
                        </div>
                    </div>

                    <!-- 提交按钮 -->
                    <div class="flex items-center gap-4 pt-4">
                        <button type="submit" :disabled="!isFormValid" :class="[
                            'px-6 py-3 rounded-lg font-semibold transition-colors',
                            isFormValid
                                ? 'bg-blue-600 text-white hover:bg-blue-700'
                                : 'bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 cursor-not-allowed'
                        ]">
                            修改密码
                        </button>
                        <button type="button" @click="resetForm"
                                class="px-6 py-3 border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
                            重置
                        </button>
                    </div>
                </form>
            </div>

            <!-- 安全提示 -->
            <div class="card">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">安全提示</h3>
                <div class="space-y-3 text-sm text-gray-600 dark:text-gray-400">
                    <div class="flex items-start gap-2">
                        <svg class="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span>密码长度至少8位，建议包含大小写字母、数字和特殊字符</span>
                    </div>
                    <div class="flex items-start gap-2">
                        <svg class="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span>避免使用生日、手机号等容易被猜到的信息作为密码</span>
                    </div>
                    <div class="flex items-start gap-2">
                        <svg class="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span>定期更换密码，建议每3-6个月更换一次</span>
                    </div>
                    <div class="flex items-start gap-2">
                        <svg class="w-4 h-4 text-blue-500 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor"
                             viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        <span>不要在多个网站使用相同的密码</span>
                    </div>
                </div>
            </div>

            <!-- 最近密码修改记录 -->
            <div class="card">
                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-4">最近密码修改记录</h3>
                <div class="space-y-3">
                    <div v-for="record in passwordHistory" :key="record.id"
                         class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
                        <div class="flex items-center gap-3">
                            <div
                                 class="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center">
                                <svg class="w-4 h-4 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor"
                                     viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                          d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                                </svg>
                            </div>
                            <div>
                                <p class="text-sm text-gray-800 dark:text-gray-200">密码修改</p>
                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ record.time }}</p>
                            </div>
                        </div>
                        <div class="text-right">
                            <p class="text-sm text-gray-600 dark:text-gray-400">{{ record.ip }}</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400">{{ record.device }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" name="profile-password">
import { ref, computed } from 'vue'

defineOptions({ name: 'profile-password' })

const showCurrentPassword = ref(false)
const showNewPassword = ref(false)
const showConfirmPassword = ref(false)

const form = ref({
    currentPassword: '',
    newPassword: '',
    confirmPassword: ''
})

const passwordStrength = ref({
    score: 0,
    text: ''
})

const passwordsMatch = ref(false)

// 密码要求
const passwordRequirements = ref([
    { key: 'length', text: '至少8位字符', met: false },
    { key: 'uppercase', text: '包含大写字母', met: false },
    { key: 'lowercase', text: '包含小写字母', met: false },
    { key: 'number', text: '包含数字', met: false },
    { key: 'special', text: '包含特殊字符', met: false }
])

// 模拟密码修改历史
const passwordHistory = ref([
    {
        id: 1,
        time: '2024-01-15 10:30:00',
        ip: '192.168.1.100',
        device: 'Chrome on Windows'
    },
    {
        id: 2,
        time: '2024-01-01 14:20:00',
        ip: '192.168.1.100',
        device: 'Chrome on Windows'
    },
    {
        id: 3,
        time: '2023-12-15 09:15:00',
        ip: '192.168.1.100',
        device: 'Chrome on Windows'
    }
])

// 计算属性
const isFormValid = computed(() => {
    return form.value.currentPassword &&
        form.value.newPassword &&
        form.value.confirmPassword &&
        passwordsMatch.value &&
        passwordStrength.value.score >= 3
})

// 方法
function checkPasswordStrength() {
    const password = form.value.newPassword
    let score = 0
    let text = ''

    // 检查长度
    if (password.length >= 8) {
        score++
        passwordRequirements.value[0].met = true
    } else {
        passwordRequirements.value[0].met = false
    }

    // 检查大写字母
    if (/[A-Z]/.test(password)) {
        score++
        passwordRequirements.value[1].met = true
    } else {
        passwordRequirements.value[1].met = false
    }

    // 检查小写字母
    if (/[a-z]/.test(password)) {
        score++
        passwordRequirements.value[2].met = true
    } else {
        passwordRequirements.value[2].met = false
    }

    // 检查数字
    if (/\d/.test(password)) {
        score++
        passwordRequirements.value[3].met = true
    } else {
        passwordRequirements.value[3].met = false
    }

    // 检查特殊字符
    if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
        score++
        passwordRequirements.value[4].met = true
    } else {
        passwordRequirements.value[4].met = false
    }

    // 设置强度文本
    if (score === 0) text = '非常弱'
    else if (score === 1) text = '弱'
    else if (score === 2) text = '一般'
    else if (score === 3) text = '强'
    else if (score === 4) text = '很强'
    else text = '非常强'

    passwordStrength.value = { score, text }
}

function checkPasswordMatch() {
    passwordsMatch.value = form.value.newPassword === form.value.confirmPassword
}

function changePassword() {
    if (!isFormValid.value) return

    // 这里可以调用 API 修改密码
    console.log('修改密码:', {
        currentPassword: form.value.currentPassword,
        newPassword: form.value.newPassword
    })

    // 模拟成功
    alert('密码修改成功！')
    resetForm()
}

function resetForm() {
    form.value = {
        currentPassword: '',
        newPassword: '',
        confirmPassword: ''
    }
    passwordStrength.value = { score: 0, text: '' }
    passwordsMatch.value = false
    passwordRequirements.value.forEach(req => req.met = false)
}
</script>